<template>
  <div class="left">
    <n-input
      v-model:value="input"
      type="text"
      placeholder
      @keyup.enter="toSearchResult(getEngine())"
      style="text-align: left"
    >
      <template #suffix>
        <Icon
          icon="material-symbols:search"
          @click="toSearchResult(getEngine())"
          class="search-icon"
        />
      </template>
    </n-input>
    <n-menu
      v-model:value="active"
      :options="searchEngines"
      key-field="param"
      label-field="name"
      :on-update:value="(key: any, item: any) => toSearchResult(item)"
    />
    <a :href="url" target="_blank">
      <n-button>
        <template #icon>
          <Icon icon="arcticons:autonavi" />
        </template>
        在新标签页打开
      </n-button>
    </a>
  </div>
  <div class="content">
    <n-empty
      size="large"
      description="已在新标签页打开"
      style="margin-top: 100px"
      v-show="is_blank"
    >
      <template #icon>
        <Icon icon="arcticons:autonavi" />
      </template>
    </n-empty>
    <iframe
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
      allowfullscreen="true"
      v-show="!is_blank"
    ></iframe>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import searchEngines from '../assets/searchEngines'
import { useRoute } from 'vue-router'
import { Icon } from '@iconify/vue'
const route = useRoute()

const active = ref(route.query.s)
const input = ref(route.query.q)

const is_blank = ref(false)
const url = ref('')

const toSearchResult = (item: any) => {
  active.value = item.param
  url.value = item.url + input.value
  is_blank.value = item.newWindow
  if (is_blank.value) {
    window.open(url.value)
  }
}

const getEngine = () => searchEngines.find((item) => item.param == active.value)
toSearchResult(getEngine())
</script>

<style lang="scss" scoped>
.left {
  border-right: rgb(239, 239, 245) 1px solid;
  float: left;
  width: 180px;
  height: calc(100vh - 61px);
  text-align: center;

  .search-icon {
    cursor: pointer;
  }
}

.content {
  height: calc(100vh - 61px);
  overflow: hidden;
}
</style>
